<template>
    <div class="page roadIn">
        <sysHeader :active="'6'"></sysHeader>
        <div class="smartSafe_l_t">
            <el-row>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon1"></div>
                        <div class="left_top_title">车场数量</div>
                        <div class="left_top_num">
                            <DigitRoll :rollDigits="tongji.ccsl" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon2"></div>
                        <div class="left_top_title">泊位数量</div>
                        <div class="left_top_num">
                            <DigitRoll :rollDigits="tongji.bwsl" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon3"></div>
                        <div class="left_top_title">占总车场比</div>
                        <div class="left_top_num last_num">
                            <DigitRoll :rollDigits="tongji.zccb" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="smartSafe_r_t">
            <el-row>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon4"></div>
                        <div class="left_top_title">预警数</div>
                        <div class="left_top_num">
                            <DigitRoll :rollDigits="tongji.yjs" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon5"></div>
                        <div class="left_top_title">共享车位数</div>
                        <div class="left_top_num">
                            <DigitRoll :rollDigits="tongji.gxcws" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="left_top_box">
                        <div class="left_top_icon icon6"></div>
                        <div class="left_top_title">已发布车位数</div>
                        <div class="left_top_num">
                            <DigitRoll :rollDigits="tongji.yfbcws" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="smartSafe_l_c">
            <div class="smartSafe_l_c_header">车场状态</div>
            <div class="smartSafe_l_c_body">
                <div class="smartSafe_l_c_tb_h"></div>
                <div class="smartSafe_l_c_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="8">
                            <div class="common_cell">区/圈</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">停车场</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">停车泊位</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData" :key="index">
                            <el-row>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.district}}</div>
                                </el-col>
                                <el-col :span="8" style="overflow: hidden;white-space:nowrap;">
                                    <div class="common_cell">
                                        <el-popover popper-class="myPop" trigger="hover" :visible-arrow="false" placement="top">
                                            <div class="pop_title">{{item.park_name}}</div>
                                            <div class="pop_info">车位总数：{{item.total_num}}</div>
                                            <div class="pop_info">可预约车位数：{{item.not_order_num}}</div>
                                            <div class="pop_info">共享车位数：{{item.shared_num}}</div>
                                            <div slot="reference" class="name-wrapper">
                                                {{item.area}}
                                            </div>
                                        </el-popover>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.carport_num}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="smartSafe_r_b">
            <div class="smartSafe_r_b_header">发布状态</div>
            <div class="smartSafe_r_b_body">
                <div class="smartSafe_r_b_tb_h"></div>
                <div class="smartSafe_r_b_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="6">
                            <div class="common_cell">小区名称</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="common_cell">发布信息</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="common_cell">剩余时间</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData2" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData2" :key="index">
                            <el-row>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.coummunity_name||'-'}}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="common_cell">
                                        {{item.published_info||'-'}}
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.rest_time?(item.rest_time+'小时'):'-'}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="smartSafe_l_b">
            <div class="smartSafe_l_b_l">
                <sysChart :options="centerLeftTopOptions1" :echart_height="'272px'"></sysChart>
            </div>
            <div class="smartSafe_l_b_r">
                <sysChart :options="centerLeftTopOptions2" :echart_height="'272px'"></sysChart>
            </div>

        </div>
        <div class="smartSafe_c_l_t">
            <div class="smartSafe_c_l_t_header">巡查联动</div>
            <div class="smartSafe_c_l_t_body">
                <sysChart :options="centerLeftCenterOptions" :echart_height="'300px'"></sysChart>
            </div>
        </div>
        <div class="smartSafe_c_l_b">
            <div class="common_head">
                <div class="common_item active">
                    <div class="common_item_bg_l"></div>
                    <div class="common_item_bg_c"></div>
                    <div class="common_item_bg_r"></div>
                    <div class="common_item_title" style="padding-left:29px">车位预约</div>
                </div>
                <div class="common_head_bg"></div>
                <div class="common_head_bg_r"></div>
            </div>
            <div class="smartSafe_c_l_b_body">
                <sysChart :options="centerLeftBottomOptions" :echart_height="'400px'"></sysChart>
            </div>
        </div>
        <div class="smartSafe_c_r_t">
            <div class="smartSafe_c_r_t_header">老旧小区改造</div>
            <div class="smartSafe_c_r_t_body">
                <el-carousel height="280px">
                    <el-carousel-item v-for="(item,index) in imgList" :key="index" class="carousel-item">
                        <el-image
                                style="width: 400px; height: 280px"
                                :src="item.url"
                                :fit="'fill'"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="smartSafe_c_r_b">
            <div class="smartSafe_c_r_b_header">车位共享</div>
            <div class="smartSafe_c_r_b_body">
                <div class="smartSafe_c_r_b_tb_h"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="6">
                            <div class="common_cell">小区名称</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="common_cell">共享车位数量</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="common_cell">使用率</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="common_cell">投诉率</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData1" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData1" :key="index">
                            <el-row>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.name|| '-'}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.shared_num||'-'}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.used_rate||0}}%</div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="common_cell">{{item.complaint_rate||0}}%</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import sysHeader from '@/components/common/sysHeader.vue'
    import sysChart from '@/components/common/sysChart.vue'

    import DigitRoll from '@huoyu/vue-digitroll';
    import config from '@/api/config.js'
    import util from '@/utils/util.js'
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        name: "smartSafe",
        data() {
            return {
                tongji: {
                    ccsl: 0,
                    bwsl: 0,
                    zccb: 0,
                    yjs: 0,
                    gxcws: 0,
                    yfbcws: 0
                },
                tableData:[],
                tableData1: [],
                tableData2: [],
                imgList: [],
                centerLeftBottomOptions: {
                    legend:{
                        x:'center',
                        textStyle: {
                            fontSize:14,
                            fontWeight:'bold',
                            color:'#FFFFFF'
                        },
                        symbol:'rect',
                        itemWidth:14,
                        itemHeight:14,
                        bottom:0,
                        data: ['政区','景区','站区','校圈','医圈','商圈']
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    color: ['#16CEB9','#3F4357','#2D99FF','#F7517F','#4346D3','#6648FF'],
                    series: [
                        {
                            name: '车位预约',
                            type: 'pie',
                            radius: '60%',
                            clockwise: false,
                            center: ['50%', '48%'],
                            data: [],
                            roseType: 'radius',
                            label: {
                                formatter:'{b}：{d}%',
                                fontWeight: 'bold',
                                fontSize:14,
                                color: 'rgba(255, 255, 255, 1)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 1)'
                                },
                                length: 5,
                                length2: 5
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function () {
                                return Math.random() * 200;
                            }
                        }
                    ]
                },
                centerLeftCenterOptions: {
                    grid: {
                        left: '10%',
                        right: '7%',
                        bottom: '50',
                        top: '50',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel:{show:false},
                        axisLine:{show:false},
                        axisTick:{show:false},
                        splitLine:{show: false}
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel:{
                            color: '#32FFB4',
                            fontSize:16,
                            fontWeight: 'bold'
                        },
                        axisTick:{
                            show: false
                        },
                        axisLine:{show: false},
                        splitLine:{show: false},
                        data: ['挂号数量', '车位空闲数量', '预约车位数量']
                    },
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                color: 'rgba(27,158,234,0.2)'
                            },
                            barWidth: '30%',
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: [{
                                value: 1000
                            },{
                                value: 1000
                            },{
                                value: 1000
                            },{
                                value: 1000
                            }],
                            animation: false
                        },
                        {
                            name: '',
                            label: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: '#fff',
                                    fontSize:14,
                                    fontWeight: 'bold'
                                }
                            },
                            barWidth: '30%',
                            type: 'bar',
                            data: [{
                                value:0,
                                itemStyle:{
                                    color: '#2D99FF'
                                }
                            },{
                                value:0,
                                itemStyle:{
                                    color: '#16CEB9'
                                }
                            },{
                                value:0,
                                itemStyle:{
                                    color: '#6648FF'
                                }
                            }]
                        }
                    ]
                },
                centerLeftTopOptions1: {
                    title:{
                        text:'景区',
                        top:95,
                        left:135,
                        textStyle:{
                            fontWeight:'bold',
                            fontSize:18,
                            color:'#42E0FC'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        textStyle: {
                            color: 'rgba(255,255,255,1)',
                            fontSize:14,
                            fontWeight: 'bold',
                            lineHeight:15
                        },
                        bottom:30,
                        itemWidth: 10,
                        itemHeight: 10,
                        orient: 'vertical',
                        left:'center',
                        data: ['本市车辆', '非本市车辆']
                    },
                    color: ['#42E0FC','#0091FF'],
                    series: [
                        {
                            name: '景区',
                            type: 'pie',
                            startAngle: 180,
                            center: ['50%','40%'],
                            radius: ['25%', '40%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter: '{d}%',
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14,
                                width:'40',
                                height:30,
                                distanceToLabelLine:1,
                                margin:0,
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 0, name: '本市车辆'},
                                {value: 0, name: '非本市车辆'},
                            ]
                        }
                    ]
                },
                centerLeftTopOptions2: {
                    title:{
                        text:'医圈',
                        top:95,
                        left:135,
                        textStyle:{
                            fontWeight:'bold',
                            fontSize:18,
                            color:'#42E0FC'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        textStyle: {
                            color: 'rgba(255,255,255,1)',
                            fontSize:14,
                            fontWeight: 'bold',
                            lineHeight:15
                        },
                        bottom:30,
                        itemWidth: 10,
                        itemHeight: 10,
                        orient: 'vertical',
                        left:'center',
                        data: ['本省车辆', '非本省车辆']
                    },
                    color: ['#C52DF1','#FFC177'],
                    series: [
                        {
                            name: '景区',
                            type: 'pie',
                            startAngle: 180,
                            center: ['50%','40%'],
                            radius: ['25%', '40%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter: '{d}%',
                                color: '#fff',
                                width:'40',
                                fontWeight: 'bold',
                                fontSize: 14,
                                height:30,
                                distanceToLabelLine:1,
                                margin:0,
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 0, name: '本省车辆'},
                                {value: 0, name: '非本省车辆'},
                            ]
                        }
                    ]
                },
                leftInterval: undefined,
                rightInterval: undefined
            }

        },
        components: {
            sysHeader,
            sysChart,
            vueSeamlessScroll,
            DigitRoll
        },
        computed: {
            classOption () {
                return util.classOption
            }
        },
        watch: {},
        mounted() {
            this.getLeftBottom()
            this.getCenterRightBottom()
            this.getLeftTop()
            this.getCenterLeftTop()
            this.getCenterLeftCenter()
            this.getCenterBottom()
            this.getCenterRightTop()
            this.getRightTop()
            this.getRightBottom()
        },
        methods: {
            getCenterRightTop() {
                this.$api.get(config.basePath+'park/index/OldCommunityRemould', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.imgList = data || []
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getRightTop() {
                this.$api.get(config.basePath+'park/index/getZhianTotalData', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tongji.yjs = data.alert || 0
                        this.tongji.gxcws = data.shared || 0
                        this.tongji.yfbcws = data.published || 0
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getRightBottom() {
                this.$api.get(config.basePath+'park/index/getCarParkState', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData2 = [].concat(...data).concat(...data)
                        //console.log(response);
                    } else {
                       // console.log(response.message);
                    }
                });
            },
            getLeftTop() {
                this.$api.get(config.basePath+'park/index/getTotalInfoData', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tongji.ccsl = data.park_num
                        this.tongji.bwsl = data.carport_num
                        this.tongji.zccb = data.rate
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getCenterLeftTop() {
                this.$api.get(config.basePath+'park/index/getCarInfo', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.centerLeftTopOptions1.series[0].data[0].value = data['景区'].local_city
                        this.centerLeftTopOptions1.series[0].data[1].value = data['景区'].not_local_city
                        this.centerLeftTopOptions2.series[0].data[0].value = data['医圈'].local_province
                        this.centerLeftTopOptions2.series[0].data[1].value = data['医圈'].not_local_province
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getCenterLeftCenter() {
                this.$api.get(config.basePath+'park/index/patrolLinkage', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        let max = 0
                        for(let key in data){
                            if(max < parseInt(data[key])){
                                max = parseInt(data[key])
                            }
                        }
                        max = Math.floor(max + max / 2)

                        this.centerLeftCenterOptions.series[0].data[0].value = max
                        this.centerLeftCenterOptions.series[0].data[1].value = max
                        this.centerLeftCenterOptions.series[0].data[2].value = max

                        this.centerLeftCenterOptions.series[1].data[0].value = data.registion_num
                        this.centerLeftCenterOptions.series[1].data[1].value = data.not_used_carpot
                        this.centerLeftCenterOptions.series[1].data[2].value = data.outpatient_service
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getCenterBottom() {
                this.$api.get(config.basePath+'park/index/parkBooking', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        const list = data.map(item => {
                            return {
                                name: item.name,
                                value: parseInt(item.rate)
                            }
                        })

                        this.centerLeftBottomOptions.series[0].data = list.sort((a,b) => a.value-b.value)
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getCenterRightBottom() {
                this.$api.get(config.basePath+'park/index/carportShared', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData1 = [].concat(...data).concat(...data)
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getLeftBottom() {
                this.$api.get(config.basePath+'park/index/parkState', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData = [].concat(...data).concat(...data)

                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            changeTable(data) {
                data.push(data[0]);//把第一条数据插入数组最有一条
                data.shift();//删除数组中第一条数据
            },
            playLeftTable(){
                if (this.leftInterval) {
                    clearInterval(this.leftInterval)
                }
                this.leftInterval = setInterval(() => {
                    this.changeTable(this.tableData)
                }, 8000);//每两秒执行一次插入删除操作
            },
            playRightTable(){
                if (this.rightInterval) {
                    clearInterval(this.rightInterval)
                }
                this.rightInterval = setInterval(() => {
                    this.changeTable(this.tableData1)
                }, 8000);//每两秒执行一次插入删除操作
            },
        }
    }
</script>

<style scoped>
    .left_top_num .d-roll-wrapper{
        margin:0 auto;
    }
    .left_top_num.last_num{
        width:50px;
        margin-left:-35px;
    }
    .last_num:after{
        content: "%";
        position:absolute;
        top:8px;
        right:-20px;
        width:20px;
    }
    .smartSafe_l_t{
        position:absolute;
        left:7px;
        top:121px;
        width:468px;
        height:222px;
    }
    .left_top_box{
        width:148px;
        height:222px;
        margin:0 auto;
        position:relative;
        background-image: url("~@/assets/images/smartSafe_t_b.png");
        background-repeat: no-repeat;
        background-size: 148px 222px;
        background-position:center 0;
    }
    .left_top_icon{
        position:absolute;
        left:50%;
        width:80px;
        height:80px;
        margin-left:-40px;
        top:24px;
    }
    .icon1{
        background-image: url("~@/assets/images/roadOut_p.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .icon2{
        background-image: url("~@/assets/images/roadOut_car.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .icon3{
        background-image: url("~@/assets/images/chart_icon.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .icon4{
        background-image: url("~@/assets/images/icon_warning.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .icon5{
        background-image: url("~@/assets/images/icon_share.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .icon6{
        background-image: url("~@/assets/images/icon_publish.png");
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position:center 0;
    }
    .left_top_title{
        position:absolute;
        left:0;
        right:0;
        top:124px;
        text-align: center;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:20px;
    }
    .left_top_num{
        width:70px;
        font-size:24px;
        font-family:DINAlternate-Bold,DINAlternate;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:28px;
        position:absolute;
        top:150px;
        left:50%;
        margin-left:-35px;
    }

    .smartSafe_l_c{
        position:absolute;
        left:12px;
        top:366px;
        width:456px;
        height:376px;
    }
    .smartSafe_l_c_body .common_table_head{
        height:48px;
        line-height: 48px;
    }
    .smartSafe_l_c_body .common_table_body{
        top:48px;
    }
    .smartSafe_l_c_body .common_table_body .common_row{
        height:48px;
        line-height: 48px;
        font-size: 14px;
    }
    .smartSafe_l_c >>> .el-table th>.cell{
        line-height: 48px;
    }
    .smartSafe_l_c >>> .el-table .el-table__body .cell{
        line-height: 49px;
    }
    .smartSafe_l_c_tb_b{
        position:absolute;
        top:48px;
        bottom:1px;
        left:0px;
        right:0px;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .smartSafe_l_c_body{
        position:relative;
        margin-top:-1px;
        height:336px;
        width:458px;
        overflow: hidden;
    }
    .smartSafe_l_c_header{
        height:40px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:40px;
        text-align: center;

        background-image: url("~@/assets/images/smartSafe_l_c_bg.png");
        background-repeat: no-repeat;
        background-size: 307px 40px;
        background-position:center 0;

    }
    .smartSafe_l_b_l{
        position:absolute;
        left:-10%;
        width:70%;
        top:0;
        height:272px;
    }

    .smartSafe_l_b_r{
        position:absolute;
        margin-left:-30px;
        left:40%;
        top:0;
        width:70%;
        height:272px;
    }
    .smartSafe_l_b{
        position:absolute;
        left:12px;
        bottom:38px;
        width:456px;
        height:272px;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .smartSafe_c_l_t_body{
        position:absolute;
        left:0;
        right:0;
        top:40px;
        bottom:10px;
    }
    .smartSafe_c_l_t_header{
        padding:17px 0 0 28px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;
    }
    .smartSafe_c_l_t{
        position:absolute;
        left:493px;
        top:168px;
        width:456px;
        height:336px;
        border-bottom:1px solid rgba(27,158,234,0.8);
        background-image: url("~@/assets/images/smartSafe_c_l_t_bg.png");
        background-repeat: no-repeat;
        background-size: 456px 336px;
        background-position:0 0;

    }
    .smartSafe_c_l_b_body{
        position:absolute;
        left:0;
        right:0;
        top:40px;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .carousel-item {
        width: 100%;
        height: 100%;
        background: white;
        display: flex;
        justify-content: center;
    }
    .smartSafe_c_l_b_header{
        padding:16px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;
    }
    .smartSafe_c_l_b{
        position:absolute;
        bottom:38px;
        left:492px;
        height:512px;
        width:456px;

    }
    .smartSafe_c_r_t{
        position:absolute;
        right:491px;
        top:167px;
        width:458px;
        height:405px;

        background-image: url("~@/assets/images/smartSafe_c_r_t_bg.png");
        background-repeat: no-repeat;
        background-size: 458px 405px;
        background-position:0 0;
    }
    .smartSafe_c_r_t_header{
        padding-top:25px;
        padding-left:25px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;
    }
    .smartSafe_c_r_t_body{
        position:absolute;
        width:400px;
        left:50%;
        margin-left:-200px;
        bottom:32px;
        height:280px;
    }
    .smartSafe_c_r_b >>> .el-table .el-table__body .cell{
        line-height:43px;
    }
    .smartSafe_c_r_b{
        position:absolute;
        right:492px;
        bottom:38px;
        height: 448px;
    }
    .smartSafe_c_r_b_header{
        height:40px;
        margin-top:-1px;

        background-image: url("~@/assets/images/smartSafe_c_r_b_bg.png");
        background-repeat: no-repeat;
        background-size: 456px 40px;
        background-position:0 0;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:40px;
        padding-left:86px;
    }
    .smartSafe_c_r_b_body{
        position:relative;
        overflow: hidden;
        height:408px;
        width:456px;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
        margin-top:-1px;
    }
    .smartSafe_c_r_b_tb_h{
        position:absolute;
        top:-1px;
        right:-1px;
        left:-1px;
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
    }
    .smartSafe_c_r_b_body .common_table_head{
        height:48px;
        line-height: 48px;
        font-size: 18px;
    }
    .smartSafe_c_r_b_body .common_table_body{
        top:48px;
    }
    .smartSafe_c_r_b_body .common_table_body .common_row{
        height:72px;
        line-height: 72px;
        font-size: 14px;
    }
    .smartSafe_l_c_tb_h{
        position:absolute;
        top:0px;
        right:0px;
        left:0px;
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
    }
    .smartSafe_r_t{
        position:absolute;
        right:7px;
        top:121px;
        width:468px;
        height:222px;
    }
    /*
    .smartSafe_r_t_body{
        height:304px;
        position:relative;
        clear: both;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .right_top_box{
        padding:27px 2px;
    }
    .right_top_item{
        width:140px;
        height:248px;
        background:linear-gradient(360deg,rgba(0,45,103,0.6) 0%,rgba(5,16,42,0.6) 100%);
        border:1px solid rgba(27,158,234,0.6);
        margin:0 auto;
        position:relative;
    }
    .right_top_name{
        padding-top:73px;
        padding-bottom:10px;
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:rgba(27,158,234,1);
        line-height:18px;
        text-align: center;
    }
    .right_top_num{
        width:70px;
        margin:0 auto;
        font-size:40px;
        font-family:DINAlternate-Bold,DINAlternate;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:28px;
    }
    .right_top_num .d-roll-wrapper{
        margin:0 auto;
    }*/
    .smartSafe_r_b{
        position:absolute;
        right:13px;
        bottom:38px;
        width:456px;
        height:676px;
    }
    .smartSafe_r_b_body .common_table_head{
        height:48px;
        line-height: 48px;
    }
    .smartSafe_r_b_body .common_table_body{
        top:48px;
    }
    .smartSafe_r_b_body .common_table_body .common_row{
        height:73px;
        line-height: 73px;
        font-size: 14px;
    }
    .smartSafe_r_b_tb_b{
        position:absolute;
        top:49px;
        bottom:1px;
        left:0px;
        right:0px;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .smartSafe_r_b_body{
        position:relative;
        margin-top:-1px;
        height:636px;
        width:458px;
        overflow: hidden;
    }
    .smartSafe_r_b_header{
        height:40px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:40px;
        text-align: center;

        background-image: url("~@/assets/images/smartSafe_l_c_bg.png");
        background-repeat: no-repeat;
        background-size: 307px 40px;
        background-position:center 0;

    }
    .smartSafe_r_b_tb_h{
        position:absolute;
        top:0px;
        right:0px;
        left:0px;
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
    }
    .page {
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-image: url("~@/assets/images/home_bg.png");
        background-repeat: no-repeat;
        background-size: 1920px 1080px;
        background-position:0 0;
    }
    >>> .el-table, .el-table__expanded-cell{
        background:none;
    }
    >>> .el-table tr:hover{
        background:none;
    }
    >>> .el-table td, .el-table th.is-leaf{
        border:none;
    }
    >>> .el-table,>>>.el-table *{
        border:none;
    }
    >>> .el-table .cell{
        line-height: 28px;
        font-size:12px;
        color:#84D2FF;
    }

    >>> .el-table th>.cell{
        line-height:32px;
    }
    >>> .el-table .el-table__body tr:nth-child(even){
        background:rgba(50,63,98,0.2);
    }
</style>
<style>
    .el-table tbody tr:hover>td {
        background:rgba(50,63,98,0.3)!important;
    }
    .el-table td, .el-table th{
        padding:0;
    }

    .el-table th, .el-table tr{
        background: none;
    }
    .el-table::before{
        height:0;
    }

    .el-table *{
        border:none!important;
    }

    .myPop.el-popover[x-placement='bottom']{
        margin-top:-10px;
        background-image: url("~@/assets/images/map_pointer_top.png");
    }
    .myPop.el-popover[x-placement='bottom'] .pop_title{
        margin-top:24px;
    }
    .myPop.el-popover .pop_title{
        margin-top:6px;
        margin-left:16px;
        font-size:12px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:18px;
        position:relative;
        padding:2px 0;
    }
    .myPop.el-popover .pop_info{
        margin-left:16px;
        font-size:12px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:18px;
        position:relative;
        padding:2px 0;
    }
    .myPop.el-popover{
        background-color: rgba(255,255,255,0);
        padding: 0 !important;
        border:none;
        width:160px;
        height:117px;
        background-image: url("~@/assets/images/map_pointer.png");
        background-repeat: no-repeat;
        background-size: 160px 117px;
        background-position:0 0;
        margin-bottom:-10px;
    }
</style>
